<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <div id="app" class='container'>
        <h3>二级导航</h3>
        <ul class="nav nav-pills ">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">个人</a></li>
            <li><a href="#">图书</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" id="dp-list" data-toggle="dropdown">其它 <span
                        class="caret"></span></a>
                <ul class="dropdown-menu" id="dp-list">
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
        </ul>
        <div class="content">
            首页
        </div>
    </div>
</body>
<script>
    $(".nav>li,#dp-list>li").click(function (e) {
        //修改激活状态
        $(this).siblings().removeClass("active").end().addClass("active")
        // if ($(this).hasClass("dropdown")) {
        //   return
        // }
        //在div中显示点击的内容
        $(".content").html($(this).html())
    })
</script>

</html>